<!-- <div>这是首页</div> -->
<template>
  <img src="../../asset/images/背景.png" alt="" class="bg" />
  <div class="common-layout">
    <!-- 左侧导航 -->
    <NavTabBarr />
    <el-container class="right-main">
      <!-- 头部 -->
      <el-header>
        <div class="user-pic">
          <div>
            <img src="../../asset/images/矢量智能对象(9).png" alt="" />
          </div>
          <div>
            <img src="../../asset/images/touxiang123.jpg" alt="" class="pic" />
          </div>
          <div>
            <img src="../../asset/images/矢量智能对象(8).png" alt="" />
          </div>
        </div>
      </el-header>
      <el-main>
      <RouterView></RouterView>
    </el-main>
    </el-container>
 
  </div>
</template>

<script lang="ts" setup>
import NavTabBarr from "./component/NavTabBarr.vue";
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  // .bg {
  //   width: 100%;
  //   height: 100%;
  // }
}
.common-layout {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  height: 100%;
  background-color: rgba(99, 121, 162, 0.3);
  min-width: 800px;
  max-width: 2500px;

  .right-main {
    // margin-left: 240px;
    height: 100%;
    .el-header {
      width: 100%;
      padding: 0;
      .user-pic {
        height: 100%;
        float: right;
        display: flex;
        justify-content: center;
        align-items: center;
        div {
          text-align: center;
          height: 100%;
          width: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 50%;
            height: 50%;
          }
          .pic {
            border-radius: 50%;
          }
        }
      }
    }
    .el-main {
      flex:1;
     padding-top:0;
     padding-bottom: 0;

    
  }
}
}
</style>
